// NAVBAR (FIXED AND STATIC)
// -------------------------


// COMMON STYLES
// -------------

.navbar
  overflow: visible
  margin-bottom: $baseLineHeight


// Gradient is applied to it's own element because overflow visible is not honored by IE when filter is present
.navbar-inner
  padding-left:  20px
  padding-right: 20px
  background: transparent
  //$gradient-vertical($navbarBackgroundHighlight, $navbarBackground)
  //$border-radius(4px)
  //$shadow = 0 1px 3px rgba(0,0,0,.25), inset 0 -1px 0 rgba(0,0,0,.1)
  //$box-shadow($shadow)


// Navbar button for toggling navbar items in responsive layouts
.btn-navbar
  display: none
  float: right
  padding: 7px 10px
  margin-left: 5px
  margin-right: 5px
  $buttonBackground($navbarBackgroundHighlight, $navbarBackground)
  $shadow = inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.075)
  $box-shadow($shadow)

.btn-navbar .icon-bar
  display: block
  width: 18px
  height: 2px
  //background-color: #f5f5f5
  $border-radius(1px)
  $box-shadow(0 1px 0 rgba(0,0,0,.25))

.btn-navbar .icon-bar + .icon-bar
  margin-top: 3px

// Override the default collapsed state
.nav-collapse.collapse
  height: auto



// Brand, links, text, and buttons
.navbar
  // Hover and active states
  .brand:hover
    text-decoration: none

  // Website or project name
  .brand
    float: left
    display: block
    padding: 8px 20px 12px
    margin-left: -20px // negative indent to left-align the text down the page
    font-size: 20px
    font-weight: 200
    line-height: 1
    color: $white

  // Plain text in topbar
  .navbar-text
    margin-bottom: 0
    line-height: 40px
    color: $navbarText
    a:hover
      color: $white
      background-color: transparent


  // Buttons in navbar
  .btn,
  .btn-group
    margin-top: 5px // make buttons vertically centered in navbar

  .btn-group .btn
    margin-top: 0 // then undo the margin here so we don't accidentally double it



// Navbar forms
.navbar-form
  margin-bottom: 0 // remove default bottom margin
  $clearfix()
  input,
  select
    display: inline-block
    margin-top: 5px
    margin-bottom: 0

  .radio,
  .checkbox
    margin-top: 5px

  input[type="image"],
  input[type="checkbox"],
  input[type="radio"]
    margin-top: 3px

  .input-append,
  .input-prepend
    margin-top: 6px
    white-space: nowrap // preven two  items from separating within a .navbar-form that has .pull-left
    input
      margin-top: 0 // remove the margin on top since it's on the parent




// Navbar search
.navbar-search
  position: relative
  float: left
  margin-top: 6px
  margin-bottom: 0
  .search-query
    padding: 4px 9px
    $font-sans-serif(13px, normal, 1)
    color: $white
    color: rgba(255,255,255,.75)
    background: #666
    background: rgba(255,255,255,.3)
    border: 1px solid #111
    $shadow = inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0px rgba(255,255,255,.15)
    $box-shadow($shadow)
    $transition(none)

    // Placeholder text gets special styles can't be bundled together though for some reason
    $placeholder($grayLighter)

    // Hover states
    &:hover
      color: $white
      background-color: $grayLight
      background-color: rgba(255,255,255,.5)

    // Focus states (we use .focused since IE7-8 and down doesn't support :focus)
    &:focus,
    &.focused
      padding: 5px 10px
      color: $grayDark
      text-shadow: 0 1px 0 $white
      background-color: $white
      border: 0
      $box-shadow(0 0 3px rgba(0,0,0,.15))
      outline: 0





// FIXED NAVBAR
// ------------

.navbar-fixed-top
  position: fixed
  top: 0
  right: 0
  left: 0
  z-index: $zindexFixedNavbar

.navbar-fixed-top .navbar-inner
  padding-left:  0
  padding-right: 0
  $border-radius(0)



// NAVIGATION
// ----------

.navbar .nav
  position: relative
  left: 0
  display: block
  float: left
  margin: 0 10px 0 0

.navbar .nav.pull-right
  float: right // redeclare due to specificity

.navbar .nav > li
  display: block
  float: left


// Links
.navbar .nav > li > a
  float: none
  padding: 10px 10px 11px
  line-height: 19px
  color: $navbarLinkColor
  text-decoration: none
  text-shadow: 0 -1px 0 rgba(0,0,0,.25)

.navbar .nav > li > a.big
  text-transform: lowercase
  font-size: 20px
  line-height: 20px

// Hover
.navbar .nav > li > a:hover
  //background-color: $navbarLinkBackgroundHover // "transparent" is default to differentiate :hover from .active
  background-color: transparent
  color: $navbarLinkColorHover
  text-decoration: none


// Active nav items
.navbar .nav .active > a,
.navbar .nav .active > a:hover
  color: $navbarLinkColorHover
  text-decoration: none
  //background-color: $navbarBackground


// Dividers (basically a vertical hr)
.navbar .divider-vertical
  height: $navbarHeight
  width: 1px
  margin: 0 9px
  overflow: hidden
  background-color: $navbarBackground
  border-right: 1px solid $navbarBackgroundHighlight


// Secondary (floated right) nav in topbar
.navbar .nav.pull-right
  margin-left: 10px
  margin-right: 0




// Dropdown menus
// --------------

// Menu position and menu carets
.navbar .dropdown-menu
  margin-top: 1px
  $border-radius(4px)
  &:before
    content: ''
    display: inline-block
    border-left:   7px solid transparent
    border-right:  7px solid transparent
    border-bottom: 7px solid #ccc
    border-bottom-color: rgba(0,0,0,.2)
    position: absolute
    top: -7px
    left: 9px

  &:after
    content: ''
    display: inline-block
    border-left:   6px solid transparent
    border-right:  6px solid transparent
    border-bottom: 6px solid $black
    position: absolute
    top: -6px
    left: 10px



// Dropdown toggle caret
.navbar .nav .dropdown-toggle .caret,
.navbar .nav .open.dropdown .caret
  border-top-color: $white

.navbar .nav .active .caret
  $opacity(100)


// Remove background color from open dropdown
.navbar .nav .open > .dropdown-toggle,
.navbar .nav .active > .dropdown-toggle,
.navbar .nav .open.active > .dropdown-toggle
  background-color: transparent


// Dropdown link on hover
.navbar .nav .active > .dropdown-toggle:hover
  color: $white


// Right aligned menus need alt position
.navbar .nav.pull-right .dropdown-menu
  left: auto
  right: 0
  &:before
    left: auto
    right: 12px

  &:after
    left: auto
    right: 13px



